<template>
  <div class="qywx-dept-user-selector">
    <!-- <el-radio-group class="dept-tag-tab-bar" v-model="curRadio" v-if="showDept && showTag">
      <el-radio-button label="部门"></el-radio-button>
      <el-radio-button label="标签"></el-radio-button>
    </el-radio-group> -->
    <div class="selector-left">
      <div class="dept-tree" v-loading="deptTreeLoading" v-show="curRadio == '部门'" v-if="showDept">
        <el-tree ref="deptTree" :data="deptTree" :props="{label:'label',children:'children'}" @node-click="handleNodeClick" :expand-on-click-node="false" :show-checkbox="isSelectDept" @check="handleNodeCheck" :check-strictly="true" node-key="id" :default-checked-keys="deptTreeDefaultCheckedKeys"></el-tree>
      </div>
      <!-- <div class="tag-list" v-loading="tagListLoading" v-show="curRadio == '标签'" v-if="showTag">
        <div class="tag-item" v-for="item in tagList" @click.stop="handleTagClick(item)">
          <el-checkbox v-model="item.checked" :key="item.tagid" @change="handleTagCheck(item,$event)" v-show="isSelectTag"></el-checkbox>
          <a>{{item.tagname}}</a>
        </div>
      </div> -->
      <div class="tool-bar">
        <el-input v-model="searchUserKey" prefix-icon="el-icon-search" placeholder="输入用户姓名、工号、电话搜索" @change="handleSearchUser"></el-input>
      </div>
      <div class="dept-user" v-if="showUser">
        <div class="dept-user-list" v-loading="userListloading">
          <el-checkbox v-model="isCheckAllUser" v-if="userList.length" label="全选" @change="checkAllUser"></el-checkbox>
          <el-checkbox v-model="item.checked" v-for="item in userList" :key="item.userId" :label="item.userName+'('+item.userId+')'" @change="setSelected(item,$event)"></el-checkbox>
        </div>
      </div>
    </div>
    <div class="selector-right">
      <div class="selected-dept-user">
        <p class="selected-item" v-for="item in selectedList">{{item.userId ? (item.userName + "(" + item.userId + ")") : (item.tagid ? (item.tagname) : (item.label))}}<el-button type="text" icon="el-icon-close" circle @click="delSelected(item)"></el-button></p>
      </div>
    </div>
  </div>
</template>

<script>
  import { listUser } from "@/api/system/user";
  import { listTag, listTagUser } from "@/api/qywx/tag";
  import { treeselect } from "@/api/system/dept";
  export default {
    name: "qywx-dept-user-selector",
    props: {
      selectedList:{//默认已选选择列表
        default:()=>[],
        type:Array
      },
      isSelectDept:{//是否选择部门
        default: false
      },
      isSelectTag:{//是否选择标签
        default: false
      },
      showDept:{//显示按部门搜索
        default: true
      },
      showTag:{//显示按标签搜索
        default: true
      },
      showUser:{//显示用户
        default: true
      },
      qyyxAcId:{
        default:'',
        type:String
      }
    },
    data(){
      return {
        isCheckAllUser:false,
        curRadio:"部门",
        deptTree:[],
        deptTreeDefaultCheckedKeys:[],
        deptTreeLoading:false,
        tagList:[],
        tagListDefaultCheckedKeys:[],
        tagListLoading:false,
        userList:[],
        userListloading:false,
        searchUserKey:"",
        curDept:{},
        curTag:{}
      }
    },
    methods:{
      checkAllUser(){
        for(let i of this.userList){
          i.checked = this.isCheckAllUser
          this.$emit('onSelectUser', i, this.isCheckAllUser)
        }
      },
      getDeptTree() {
        let that = this
        that.deptTree = []
        that.userList = []
        for(let i of that.selectedList){
          if(!i.userId){
            that.deptTreeDefaultCheckedKeys.push(i.id)
          }
        }
        this.deptTreeLoading = true
        treeselect().then(function (res) {
          that.deptTreeLoading = false
          if(res.code == 200){
            that.deptTree = res.data
          }
        })
      },
      handleNodeClick(node){
        let that = this
        this.curDept = node
        that.userListloading = true
        listUser({deptId:node.id, qyyxAcId:this.qyyxAcId||'', pageNum:1, pageSize:100}).then(function(res){
          if(res.code == 200){
            for(let j of res.rows){
              j.userCode = j.userId
              j.userId = j.userName
              j.userName = j.nickName
            }
            for(let i of that.selectedList){
              let findObj = res.rows.find(obj => (obj.userId && obj.userId == i.userId))
              if(findObj){
                findObj.checked = true
              }
            }
            that.userList = res.rows
          }
          that.userListloading = false
        })
      },
      handleNodeCheck(data, checked){
        let val = checked.checkedKeys.findIndex((n) => n == data.id) != -1  ? true : false
        this.$emit('onSelectDept', data, val)
      },
      handleSearchUser(){
        let that = this
        that.userListloading = true
        if(this.curRadio=="部门"){
          let node = this.curDept
          listUser({deptId:node?node.id:"", searchValue:this.searchUserKey, qyyxAcId:this.qyyxAcId||'', pageNum:1, pageSize:100}).then(function(res){
            if(res.code == 200){
              for(let j of res.rows){
                j.userCode = j.userId
                j.userId = j.userName
                j.userName = j.nickName
              }
              for(let i of that.selectedList){
                let findObj = res.rows.find(obj => (obj.userId && obj.userId == i.userId))
                if(findObj){
                  findObj.checked = true
                }
              }
              that.userList = res.rows
            }
            that.userListloading = false
          })
        }else if(this.curRadio=="标签"){
          let item = this.curTag
          listTagUser({tagid: item?item.tagid:"", name:this.searchUserKey}).then(function(res){
            if(res.code == 200){
              for(let j of res.data.userlist){
                j.userCode = j.userid
                j.userId = j.userid
                j.userName = j.name
              }
              for(let i of that.selectedList){
                let findObj = res.data.userlist.find(obj => (obj.userId && obj.userId == i.userId))
                if(findObj){
                  findObj.checked = true
                }
              }
              that.userList = res.data.userlist
            }
            that.userListloading = false
          })
        }

      },
      getTagList() {
        let that = this
        that.tagList = []
        that.userList = []
        for(let i of that.selectedList){
          if(i.tagid){
            that.tagListDefaultCheckedKeys.push(i.id)
          }
        }
        this.tagListLoading = true
        listTag().then(function (res) {
          that.tagListLoading = false
          if(res.code == 200){
            that.tagList = res.data.taglist
          }
        })
      },
      handleTagClick(item){
        let that = this
        this.curTag = item
        that.userListloading = true
        listTagUser({tagid: item.tagid}).then(function(res){
          if(res.code == 200){
            for(let j of res.data.userlist){
              j.userCode = j.userid
              j.userId = j.userid
              j.userName = j.name
            }
            for(let i of that.selectedList){
              let findObj = res.data.userlist.find(obj => (obj.userId && obj.userId == i.userId))
              if(findObj){
                findObj.checked = true
              }
            }
            that.userList = res.data.userlist
          }
          that.userListloading = false
        })
      },
      handleTagCheck(item, val){
        this.$emit('onSelectUser', item, val)
      },
      clearUserList(){
        this.userList = []
      },
      setSelected(item, val){
        if(!val){
          this.isCheckAllUser = false
        }
        this.$emit('onSelectUser', item, val)
      },
      delSelected(item){
        if(item.userId){
          let qywxDeptUserObj = this.userList.find(obj => obj.userId == item.userId)
          if(qywxDeptUserObj){
            qywxDeptUserObj.checked = false
          }
        }else if(item.tagid){
          let tagObj = this.tagList.find(obj => obj.tagid == item.tagid)
          if(tagObj){
            tagObj.checked = false
          }
        }else{
          let treeCheckedNode = this.$refs.deptTree.getCheckedNodes()
          let qywxDeptObj = treeCheckedNode.find(obj => (obj.id == item.id && obj.label == item.label))
          if(qywxDeptObj){
            this.$refs.deptTree.setChecked(qywxDeptObj.id, false,false)
          }
        }
        this.$emit('onDelUser', item)
      }
    },
    created() {
      if(this.showDept){
        this.curRadio = "部门"
      }else if(this.showTag){
        this.curRadio = "标签"
      }else{
        this.curRadio = "部门"
      }
      if(this.showDept){
        this.getDeptTree()
      }
      // if(this.showTag){
      //   this.getTagList()
      // }
      if(!this.showDept && !this.showTag && this.showUser){
        this.handleNodeClick({id:"1"})
      }

    }
  }
</script>

<style scoped>
  .qywx-dept-user-selector{
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
  }
  .dept-tag-tab-bar{
    flex: 0 0 100%;
    margin-bottom: 10px;
  }
  .selector-left{
    flex: 0.49;
  }
  .selector-right{
    flex: 0.49;
  }
  .tag-list{
    width: 100%;
    border: 1px solid rgb(230, 235, 245);
    border-radius: 4px;
    padding: 10px;
    height: 200px;
    overflow: auto;
    margin-bottom: 20px;
  }
  .tag-item{
    margin-bottom: 10px;
  }
  .tag-item a{
    margin-left: 8px;
  }
  .dept-tree{
    width: 100%;
    border: 1px solid rgb(230, 235, 245);
    border-radius: 4px;
    height: 200px;
    margin-bottom: 20px;
  }
  .dept-tree .el-tree{
    border-radius: 4px;
    height: 100%;
    overflow: auto;
  }
  .dept-user{
    width: 100%;
    border: 1px solid rgb(230, 235, 245);
    border-radius: 4px;
    padding: 10px;
    height: 300px;
    overflow: auto;
  }
  .dept-user .el-checkbox{
    display: block;
    margin-bottom: 10px;
  }
  .selected-dept-user{
    width: 100%;
    border: 1px solid rgb(230, 235, 245);
    border-radius: 4px;
    padding: 10px;
    height: 520px;
    overflow: auto;
  }
  .selected-dept-user .selected-item{
    background-color: rgb(230, 235, 245);
    padding: 5px 10px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
</style>
